<template>
  <div class="areaRanking">
    <x-header class="header" :left-options="{showBack: showHeaderBack,preventGoBack:true}" @on-click-back="goToPage" ref="header">区域排行</x-header>
    <div class="topHolder"></div>
    <card class="gridDisplay">
      <div class="card-padding" slot="content" style="padding-top: 0;">
        <div class="filterArea dateFilter" ref="filterArea">
          <group-title style="text-align: center;">当前显示日期：{{choosenDate}}<br/></group-title>
          <x-button :show-loading="loadingStatus" :disabled="loadingStatus" @click.native="changeDate(1)" class="inlineBtn">今日</x-button>
          <x-button :show-loading="loadingStatus" :disabled="loadingStatus" @click.native="changeDate(2)" class="inlineBtn">昨日</x-button>
          <a v-if="loadingStatus" class="datePicker"><i class="iconfont icon-rilicalendar107"></i></a>
          <datetime v-else v-model="choosenDate" :start-date="startDate" :end-date="endDate" @on-confirm="changeDate(0)" class="datePicker">
            <i class="iconfont icon-rilicalendar107"></i>
          </datetime>
          <div class="filterItem"><x-button @click.native="showSortType = true" type="default" v-html="sortTypeText" :show-loading="loadingStatus" :disabled="loadingStatus" class="inlineBtn popPickerBtn"></x-button>&nbsp</div>
        </div>
        <popup-picker @on-hide="popupPickerFunc" :show.sync="showSortType" :show-cell="false" :data="sortType" :columns="1" v-model="choosenSortType" ref="sortType" class="btn_popup-picker"></popup-picker>
      </div>
    </card>
    <group>
      <x-table :cell-bordered="false">
        <thead>
        <tr style="background-color: #F7F7F7">
          <th width="15%">排位</th>
          <th width="28%">区域名称</th>
          <th width="22%">开台次数</th>
          <th width="30%">消费金额</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in rankingList" :key="index">
          <td v-text="index + 1"></td>
          <td v-text="item.AREA"></td>
          <td v-text="item.number"></td>
          <td v-text="'¥ ' + formatCurrency(item.total) + '元'"></td>
        </tr>
        <tr v-if="rankingList.length <= 0">
          <td colspan="3">
            <div class="listNoItem">暂无排行明细</div>
          </td>
        </tr>
        </tbody>
      </x-table>
    </group>
    <br/>
    <br/>
  </div>
</template>

<script>
  import { Group, XButton, Card, PopupPicker, Datetime, GroupTitle, XTable, numberComma, dateFormat } from 'vux'
  import {getAreaRanking} from "../../api";
  import {message,toDecimal2} from "../../common/util";

  export default {
    name:'areaRanking',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        choosenDate:dateFormat(new Date(), 'YYYY-MM-DD'),
        startDate:'2019-01-01',
        endDate:dateFormat(new Date(), 'YYYY-MM-DD'),
        showSortType:false,
        sortType:[{name:'按开台次数排行',value:'sortByNumber'},{name:'按消费金额排行',value:'sortByTotal'}],
        sortTypeText:'',
        choosenSortType:['sortByTotal'],
        rankingList:[]
      }
    },
    components:{
      Group,
      XButton,
      Card,
      PopupPicker,
      Datetime,
      GroupTitle,
      XTable
    },
    computed:{
    },
    methods:{
      goToPage(){
        this.$router.push({path:'/'})
      },
      formatCurrency(number){
        return numberComma(toDecimal2(number))
      },
      changeDate(value){
        console.log(value)
        switch (value) {
          case 1:this.choosenDate = dateFormat(new Date(), 'YYYY-MM-DD');break;
          case 2:this.choosenDate = dateFormat(new Date().setDate(new Date().getDate()-1), 'YYYY-MM-DD');break;
          default: break;
        }
        console.log(this.choosenDate)
        this.refreshPage()
      },
      refreshPage(params){
        this.loadingStatus = true
        getAreaRanking(this.choosenDate).then((res)=>{
          if(res.status == 'success'){
            this.rankingList = res.data
          }else if(res.status == 'error') {
            message({message:res.msg,type:'error'})
            console.log('getAreaRanking error info:', res.msg)
          }
          this.loadingStatus = false
          if(params && params.callback && typeof params.callback == 'function')params.callback(res.status)
        }).catch((err)=>{console.log('getAreaRanking catch info:',err)})
      },
      sortTable(){
        if(this.choosenSortType == 'sortByNumber'){
          this.rankingList.sort(function(item1,item2){
            if(item1.number > item2.number){
              return -1;
            }else if(item1.number < item2.number){
              return 1;
            }
            return 0;
          })
        }else if(this.choosenSortType == 'sortByTotal'){
          this.rankingList.sort(function(item1,item2){
            if(item1.total > item2.total){
              return -1;
            }else if(item1.total < item2.total){
              return 1;
            }
            return 0;
          })
        }
      },
      popupPickerFunc(closeType){
        if(closeType){
          this.changeSortTypeText()
          this.sortTable()
        }
      },
      changeSortTypeText(){
        this.sortTypeText = this.$refs.sortType&&this.$refs.sortType.getNameValues().replace(/ /g,' / ')+'<i class=\'iconfont icon-xiangxia2\'></i>'
      }
    },
    mounted(){
      this.refreshPage({callback:(status)=>{
          if(status == 'success') this.sortTable()
          setTimeout(()=>{this.changeSortTypeText()},200)
          this.$store.commit('updateLoadingStatus',{isLoading:false})
        }})
    }
  }
</script>

<style lang="scss">
  .areaRanking{
    .filterArea{
      &.dateFilter{
        margin-bottom: 0.5rem;
        .datePicker{
          float: right;padding: 0;
          &.weui-cell:before{border-top: none;}
          i{font-size: 2rem;color:#535353;}
        }
      }
      .filterItem{margin-top: 0.5rem;}
    }
    .gridDisplay{
      h2.title{
        line-height: 1.8rem;color: #636363;font-size:2rem;text-align: center;margin: 1rem 0;
        small{font-size:1rem;color: #999999;}
      }
      .data{display: inline-block;height:1.5rem;}
    }
    .total{text-align: right;padding:1rem 1rem 1rem 0;}
  }
</style>
